<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读 - Saber-Translator</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/variables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/reader.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>
<body>
    <!-- 阅读器头部 -->
    <header class="reader-header">
        <div class="header-left">
            <button id="backBtn" class="header-btn" title="返回书架">
                <span class="btn-icon">←</span>
                <span class="btn-text">返回</span>
            </button>
            <div class="book-info">
                <span id="bookTitle" class="book-title">加载中...</span>
                <span class="separator">·</span>
                <span id="chapterTitle" class="chapter-title">-</span>
            </div>
        </div>
        <div class="header-center">
            <span id="pageInfo" class="page-info">- / -</span>
        </div>
        <div class="header-right">
            <div class="view-mode-toggle">
                <button id="viewOriginalBtn" class="mode-btn" data-mode="original" title="查看原图">
                    原图
                </button>
                <button id="viewTranslatedBtn" class="mode-btn active" data-mode="translated" title="查看翻译">
                    翻译
                </button>
            </div>
            <button id="settingsBtn" class="header-btn" title="阅读设置">
                <span class="btn-icon">⚙️</span>
            </button>
            <button id="translateBtn" class="header-btn primary" title="进入翻译页面">
                <span class="btn-icon">✏️</span>
                <span class="btn-text">翻译</span>
            </button>
        </div>
    </header>

    <!-- 主阅读区域 -->
    <main class="reader-main">
        <!-- 加载状态 -->
        <div id="loadingState" class="loading-state">
            <div class="loading-spinner"></div>
            <p>正在加载...</p>
        </div>

        <!-- 空状态 -->
        <div id="emptyState" class="empty-state" style="display: none;">
            <div class="empty-icon">📖</div>
            <h2>暂无图片</h2>
            <p>该章节还没有图片，点击下方按钮开始翻译</p>
            <button id="goTranslateBtn" class="btn btn-primary">进入翻译</button>
        </div>

        <!-- 图片容器 -->
        <div id="imagesContainer" class="images-container" style="display: none;">
            <!-- 图片将由JS动态生成 -->
        </div>
    </main>

    <!-- 章节导航 -->
    <nav id="chapterNav" class="chapter-nav" style="display: none;">
        <button id="prevChapterBtn" class="nav-btn" disabled>
            <span class="nav-icon">◀</span>
            <span class="nav-text">上一章</span>
        </button>
        <button id="nextChapterBtn" class="nav-btn" disabled>
            <span class="nav-text">下一章</span>
            <span class="nav-icon">▶</span>
        </button>
    </nav>

    <!-- 回到顶部按钮 -->
    <button id="scrollTopBtn" class="scroll-top-btn" style="display: none;" title="回到顶部">
        <span>↑</span>
    </button>

    <!-- 阅读设置面板 -->
    <div id="settingsPanel" class="settings-panel">
        <div class="settings-overlay" onclick="closeSettings()"></div>
        <div class="settings-content">
            <div class="settings-header">
                <h3>阅读设置</h3>
                <button class="close-btn" onclick="closeSettings()">×</button>
            </div>
            <div class="settings-body">
                <div class="setting-item">
                    <label>图片宽度</label>
                    <div class="setting-control">
                        <input type="range" id="imageWidthSlider" min="50" max="100" value="100">
                        <span id="imageWidthValue">100%</span>
                    </div>
                </div>
                <div class="setting-item">
                    <label>图片间距</label>
                    <div class="setting-control">
                        <input type="range" id="imageGapSlider" min="0" max="50" value="8">
                        <span id="imageGapValue">8px</span>
                    </div>
                </div>
                <div class="setting-item">
                    <label>背景颜色</label>
                    <div class="setting-control bg-options">
                        <button class="bg-option active" data-bg="#1a1a2e" style="background: #1a1a2e;"></button>
                        <button class="bg-option" data-bg="#ffffff" style="background: #ffffff;"></button>
                        <button class="bg-option" data-bg="#f5f5dc" style="background: #f5f5dc;"></button>
                        <button class="bg-option" data-bg="#2d2d2d" style="background: #2d2d2d;"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 通知 -->
    <div id="toast" class="toast"></div>

    <script src="{{ url_for('static', filename='js/reader.js') }}"></script>
</body>
</html>
